<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>防抖</h1>
		<p>一个事件触发太频繁，通过防抖，让事件停止一段时间后才触发</p>
		<input id="inp"/>
		<script>
			// 什么时候闭包：函数作为返回值被返回
			// timer闭包中的变量不会销毁
		function debounce(callback,delay=300){
			// 定义局部的变量 timer
			let timer = null;			
			// 返回一个函数
			return function() {
				// 如果有timer清除定时器
				if(timer){clearTimeout(timer)}
				// 没有timer等待delay时间就会执行 callbac
				timer = setTimeout(()=>{
					// callback中this指向返回函数的this
					// 谁调用函数谁是this
					// 传入参数类别
					callback.apply(this,arguments)
				},delay)
			}
		}
		
		var inp = document.getElementById("inp");
		// 当inp触发inp事件的时候，执行debounce返回的函数
		// 返回函数等待500毫秒，就会执行debounce第一个参数callback
		/* inp.addEventListener("input",debounce(function(e){
			console.log(inp.value,"发起ajax请求",e,this)
		},500)) */
		// inp触发iput事件时候 执行debounce返回的函数，等待500毫秒后会执行doinput
		// doinput的this 指向inp
		inp.addEventListener("input",debounce(doinput,500))
		
		function doinput(e){
			console.log(inp.value,"发起ajax请求",e,this)
		}
			// var timer = null;
			// inp.oninput = function(e){
			// 	if(timer){ clearTimeout(timer)}
			// 	timer = setTimeout(()=>{
			// 		console.log(inp.value,"发起ajax请求")
			// 	},500)
				
			// }
			
		</script>
	</body>
</html>